<!--
 * @Author: zhang_rui_1 17805271997@163.com
 * @Date: 2023-07-12 16:44:54
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2024-01-03 11:12:26
 * @FilePath: \vue3-ts\src\views\bus\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E5%BD%AE
-->
<template>
  <div class="box">
    <box-top />
    <div class="box-main">
      <div class="box-main-left">
        <h6>今日车辆实时统计</h6>
        <div class="box-main-left-top">
          <dl>
            <dt>
              <img src="../../../assets/images//bus/info-img-1.png" alt="" />
            </dt>
            <dd>
              <p>车辆总数(辆)</p>
              <span>12,457</span>
            </dd>
          </dl>
          <dl>
            <dt>
              <img src="../../../assets/images//bus/info-img-2.png" alt="" />
            </dt>
            <dd>
              <p>当前在线数(辆)</p>
              <span>12,457</span>
            </dd>
          </dl>
          <dl>
            <dt>
              <img src="../../../assets/images//bus/info-img-3.png" alt="" />
            </dt>
            <dd>
              <p>今日活跃数(辆)</p>
              <span>12,457</span>
            </dd>
          </dl>
          <dl>
            <dt>
              <img src="../../../assets/images//bus/info-img-4.png" alt="" />
            </dt>
            <dd>
              <p>今日活跃率(%)</p>
              <span>83</span>
            </dd>
          </dl>
        </div>
        <div class="box-main-left-top-bottom">
          <p>
            <span><svg-icon className="iconfontanquan"></svg-icon></span>
            <span>已保护车辆</span>
          </p>
          <p><span>505,302</span>辆</p>
        </div>

        <h6>近30天受击趋势</h6>
        <div class="box-main-left-center">
          <bar-graph :dataSource="leftCenterEcharts" />
        </div>
        <h6>全球受攻击车辆城市</h6>
        <div class="box-main-left-bottom">
          <dl v-for="item in leftBottomArr" :key="item.id">
            <dt>{{ item.name }}</dt>
            <dd>
              <span>{{ item.value }}</span
              >辆
            </dd>
          </dl>
        </div>
      </div>
      <div class="box-main-center">
        <div class="box-main-center-top">
          <map-echarts :dataSource="centerMapEcharts" />
        </div>
        <center-bottom />
      </div>
      <div class="box-main-right">
        <h6>南京车辆分析</h6>
        <div class="box-main-right-top">
          <dv-scroll-board
            :config="rightTopObj"
            style="width: 100%; height: 100%"
          />
        </div>
        <h6>事件占比</h6>
        <div class="box-main-right-center">
          <right-graph :dataSource="rightCenterEcharts" />
        </div>
        <h6>告警事件</h6>
        <div class="box-main-right-bottom">
          <dv-scroll-board
            :config="rightBottomObj"
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>
  <script  lang="ts">
import { toRefs, reactive, defineComponent } from "vue";
import boxTop from "../components/boxTop/index.vue";
import centerBottom from "../components/centerBottom/index.vue";
import {
  leftTopObj,
  leftCenterEcharts,
  leftBottomArr,
  centerMapEcharts,
  rightTopObj,
  rightCenterEcharts,
  rightBottomObj,
} from "./index";
import BarGraph from "../components/echarts/BarGraph.vue";
import MapEcharts from "../components/echarts/MapEcharts.vue";
import RightGraph from "../components/echarts/RightGraph.vue";
export default defineComponent({
  name: "busIndex",
  components: { centerBottom, boxTop, BarGraph, MapEcharts, RightGraph },
  setup() {
    const state = reactive({
      leftTopObj, // 左侧头部数据
      leftCenterEcharts, //左侧中间echarts
      leftBottomArr, //左侧下边数据
      centerMapEcharts, //中间地图数据
      rightTopObj, //右侧头部数据
      rightCenterEcharts, //右侧中间数据
      rightBottomObj, //右侧下方echarts数据
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>
  <style scoped lang="less">
.box {
  background: url("../../../assets/images/bus/box-bg.png") no-repeat;
  background-size: cover;
  &-main {
    height: calc(100% - 6%);
    display: flex;
    background: url(../../../assets/images/bus/footerLine.png) no-repeat;
    background-size: 100% auto;
    background-position: bottom left;
    h6 {
      height: 2.8rem;
      line-height: 2.8rem;
      padding: 0;
      margin: 0;
      font-size: 0.9rem;
      color: white;
      padding-left: 1.6rem;
      background: url(../../../assets/images/bus/title_box.png) no-repeat;
      background-position: center left;
      position: relative;
      background-size: 100%;
      left: 0;
      padding-left: 2rem;
    }
    &-left {
      width: 25%;
      height: 100%;
      &-top {
        width: 100%;
        color: #9aabbe;
        height: calc(24% - 7%);
        display: flex;
        justify-content: space-around;
        align-items: center;
        dl {
          width: 25%;
          text-align: center;
          margin: 0 auto;
          font-weight: bold;
          dt {
            margin: 0 auto;
            img {
              display: inline-block;
              width:34%;
              height: auto;
            }
          }
          dd {
            margin-left: 0;
            span {
              font-size: 1.3rem;
            }
          }
          &:nth-child(1) dd span {
            color: #ffff44;
          }
          &:nth-child(2) dd span {
            color: #25f3e6;
          }
          &:nth-child(3) dd span {
            color: #f84a4a;
          }
          &:nth-child(4) dd span {
            color: #f5c847;
          }
        }
        &-bottom {
          padding: 0 1rem;
          box-sizing: border-box;
          height: calc(7%);
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: linear-gradient(to top, #061436, #04445a);
          color: white;
          p {
            margin: 0;
            padding: 0;
          }
          p:nth-child(1) {
            span:nth-child(2) {
              font-size: 1rem;
            }
          }
          p:nth-child(2) {
            > span {
              letter-spacing: 0.4rem;
              font-size: 1.6rem;
            }
          }
        }
      }
      &-center {
        width: 100%;
        height: calc(35% - 7%);
      }
      &-bottom {
        width: 100%;
        color: #fff;
        height: calc(33% - 7%);
        dl {
          color: white;
          display: inline-block;
          width: 27%;
          text-align: center;
          margin: 0.625rem;
          dt {
            background: #24456d;
            padding: 0.3rem 0;
          }
          dd {
            padding: 0;
            margin: 0;
            height: 3.25rem;
            line-height: 3.25rem;
            background: rgba(32, 57, 87, 0.5);
          }
        }
      }
    }
    &-center {
      width: 50%;
      height: 100%;
      padding: 0.8rem;
      box-sizing: border-box;
      &-top {
        height: 85%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &-bottom {
        height: 15%;
      }
    }
    &-right {
      width: 25%;
      height: 100%;
      &-top {
        width: 100%;
        height: calc(32% - 7%);
        /deep/ .dv-scroll-board .rows .row-item {
          text-align: center;
          background: linear-gradient(to top, #112e4e, #162438);
        }
        /deep/ .dv-scroll-board .rows .row-item .ceil:nth-child(3),
        /deep/ .dv-scroll-board .rows .row-item .ceil:nth-child(5) {
          font-weight: bold;
        }
      }
      &-center {
        width: 100%;
        height: calc(34% - 7%);
      }
      &-bottom {
        width: 100%;
        height: calc(30% - 7%);
        /deep/ .dv-scroll-board .rows .row-item {
          background: rgba(32, 57, 87, 0.5) !important;
        }
        /deep/ .dv-scroll-board .rows .row-item .ceil {
          border: 1px solid rgb(6, 20, 54);
          text-align: center;
        }
        /deep/ .dv-scroll-board .rows .row-item .ceil:nth-child(4) {
          color: red;
        }
        /deep/ .dv-scroll-board .header {
          background: rgba(32, 57, 87, 0.5) !important;
        }
        /deep/ .dv-scroll-board .rows .row-item span {
          background: #24456d !important;
        }
      }
    }
  }
}
</style>